<template>
  <div class="page-container">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item><会员列></会员列>表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" :rules="filtersRules">
        <el-row class="search-input">
          <!-- <el-row class="times mr30"> -->

          <el-form-item label="用户帐号：" prop="userAccount">
            <el-input v-model="filters.userAccount" placeholder="请输入用户帐号" maxlength="80" clearable></el-input>
          </el-form-item>
          <el-form-item label="用户昵称：" class="mr10" prop="nickName">
            <el-input v-model="filters.nickName" placeholder="请输入用户昵称" maxlength="80" clearable></el-input>
          </el-form-item>
          <el-form-item label="用户手机号："  prop="phone">
            <el-input v-model="filters.phone" placeholder="请输入用户手机号" class="w170" maxlength="11" clearable></el-input>
          </el-form-item>


          <el-form-item label="状态："  >
            <el-select v-model="filters.status"  placeholder="全部" >
              <el-option label="正常" value="1"></el-option>
              <el-option label="冻结" value="0"></el-option>
            </el-select>
          </el-form-item>

        </el-row>

        <el-row>
          <el-form-item label="注册时间：" prop="registrationStartTime">
            <el-date-picker
              v-model="filters.registrationStartTime"
              type="datetime"
              placeholder="开始时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              @change="changeStartDate"
              :picker-options="startDateDisabled"
            ></el-date-picker>
          </el-form-item>
          <span class="times-to">-</span>
          <el-form-item prop="registrationEndTime">
            <el-date-picker
              v-model="filters.registrationEndTime"
              type="datetime"
              placeholder="结束时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              @change="changeEndDate"
              :picker-options="endDateDisabled"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="最后登录时间：" prop="logStartTime" >
            <el-date-picker
              v-model="filters.logStartTime"
              type="datetime"
              placeholder="开始时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              @change="checkLogStartTime"
              :picker-options="startLoginDateDisabled"
            ></el-date-picker>
          </el-form-item>
          <span class="times-to">-</span>
          <el-form-item prop="logEndTime">
            <el-date-picker
              v-model="filters.logEndTime"
              type="datetime"
              placeholder="结束时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              @change="checkLogEndTime"
              :picker-options="endLoginDateDisabled"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>

          <el-form-item label="用户来源：" class="mr10" >
            <el-select v-model="filters.userSource"  placeholder="全部">
              <el-option v-for="item in userSourceList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签：" class="mr10" >
            <el-select v-model="filters.labelName"  placeholder="全部" >
              <el-option v-for="(item, index) in labelOptions" :key="index" :label="item.labelName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

<!--          <el-form-item label="是否实名认证：" class="mr10" >-->
<!--            <el-select v-model="filters.isAuthentication"  placeholder="全部">-->
<!--              <el-option label="是" value="1"></el-option>-->
<!--              <el-option label="未实名" value="2"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

<!--          <el-form-item prop="integralBegin" label="积分区间：" style="margin-left: 30px">-->
<!--            <el-input-->
<!--              v-model.trim="filters.integralBegin"-->
<!--              oninput="value=value.replace(/[^\d]/g,'')"-->
<!--              maxlength="5"-->
<!--              auto-complete="off"-->
<!--              class="w78 lessPaddingRight"-->
<!--              placeholder="输入数字"-->
<!--              clearable-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--          <span class=" times-to">-</span>-->
<!--          <el-form-item prop="integralEnd" >-->
<!--            <el-input-->
<!--              v-model.trim="filters.integralEnd"-->
<!--              auto-complete="off"-->
<!--              oninput="value=value.replace(/[^\d]/g,'')"-->
<!--              maxlength="5"-->
<!--              min="0"-->
<!--              placeholder="输入数字"-->
<!--              clearable-->
<!--              class="w78 lessPaddingRight"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
             @click="batchSetLabelParams()" type="primary" size="mini"  label="批量设置标签">
          </kt-button>
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              :label="'搜索'"
              type="primary"
              @click="findPageClick(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button :label="$t('action.reset')" type="primary" @click="resetForm('filters')" plain :size="size"/>
          </el-form-item>
          <!-- <el-form-item>
          </el-form-item> -->
        </el-row>
      </el-form>
    </div>
    <div class="toolbar t_r"  >
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <div style="width:100%">
          <!--表格-->
          <el-table
            :data="tableList"
            :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
            :highlight-current-row="true"
            :max-height="15000"
            :size="'mini'"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            class="specialTable"
            :border="false"
            v-loading="loading"
          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column align="center" label="序号" width="160" element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.id}}</span>
              </template>
            </el-table-column>

            <el-table-column width="185px" align="center" label="用户账号">
              <template slot-scope="scope">
                <span>{{ scope.row.userAccount || '-'}}</span>
              </template>
            </el-table-column>
            <el-table-column width="185px" align="center" label="昵称">
              <template slot-scope="scope">
                <span>{{ scope.row.nickName || '-'}}</span>
              </template>
            </el-table-column>
            <el-table-column width="185px" align="center" label="手机号">
              <template slot-scope="scope">
                <span>{{ scope.row.phone || '-'}}</span>
              </template>
            </el-table-column>
            <el-table-column width="185px" align="center" label="会员积分">
              <template slot-scope="scope">
                <span>{{ scope.row.integral}}</span>
              </template>
            </el-table-column>

<!--            <el-table-column width="185px" align="center" label="是否实名认证">-->
<!--              <template slot-scope="scope">-->
<!--                <span v-if="scope.row.isAuthentication == 1">是</span>-->
<!--                <span v-if="scope.row.isAuthentication == 2">否</span>-->
<!--              </template>-->
<!--            </el-table-column>-->

            <el-table-column width="185px" align="center" label="用户来源">
              <template slot-scope="scope">
                <span>{{scope.row.userSource}}</span>
              </template>
            </el-table-column>

            <el-table-column width="185px" align="center" label="会员类型">
              <template slot-scope="scope">
                <span>{{scope.row.memberType}}</span>
              </template>
            </el-table-column>

            <el-table-column width="185px" align="center" label="注册时间">
              <template slot-scope="scope">
                <span>{{ scope.row.registrationTime || '-'}}</span>
              </template>
            </el-table-column>
            <el-table-column width="185px" align="center" label="最后登录时间" >
              <template slot-scope="scope">
                <span>{{ scope.row.lastLogTime}}</span>
              </template>
            </el-table-column>

            <el-table-column class-name="status-col" align="center" label="状态" width="190" >
              <template slot-scope="scope">
                <span>{{ scope.row.status==0?"冻结":"正常"}}</span>
              </template>
            </el-table-column>

            <el-table-column prop="tag" label="标签"  width="330"  fit class="tags" style="overflow: visible">
              <template slot-scope="scope" >
                <div v-show="null !=scope.row.labelList" v-for="item in scope.row.labelList" :key="item.index" class="turnInlineBlock ml15 mr15 mb10">{{item}}</div>
                <span v-show="null ==scope.row.labelList">-</span>
              </template>
            </el-table-column>
            <el-table-column class-name="status-col" align="left" fixed="right" label="操作" width="450" >
              <template slot-scope="scope">
                <kt-button
                  @click="handleDetail(scope.row)" type="text" size="mini"  label="查看" >
                </kt-button>
                <kt-button
                  @click="SetLabelParams(scope.row)" type="text" size="mini"  label="设置标签" >
                </kt-button>
                <kt-button
                  @click="DelLabelParams(scope.row)" type="text" size="mini"  label="删除标签" >
                </kt-button>
                <div  class="turnInlineBlock">
                  <kt-button :label="'冻结'" :size="size" v-if="scope.row.status == 1" type="text"
                    @click="handleIsBlacklist(scope.row)" >
                  </kt-button>
                  <kt-button  :label="'解冻'" :size="size" v-if="scope.row.status == 0" type="text"
                     @click="handleIsWhitelist(scope.row)" >
                  </kt-button>
                </div>

              </template>
            </el-table-column>
          </el-table>
          <!--分页栏v-if="scope.row.status == 1"-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="currentChange"
              :current-page="filters.start"
              :page-size="filters.limit"
              :total="totalSize"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="sizeChange"
            ></el-pagination>
          </div>
        </div>
       <el-dialog :visible.sync="editDialogVisible" title="添加标签" size="mini" width="50%" :close-on-click-modal="false">
          <div class="mb30">
            <el-form inline :model="labelForm" ref="labelForm" :size="size" class="formItemNoMarginR">
                <el-form-item label="标签名称：" prop="labelName" class="w200">
                  <el-input v-model="labelForm.labelName" auto-complete="off" clearable placeholder="请输入标签名称" ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="SetLabelParams(labelForm.labelName)" icon="el-icon-search">搜索</el-button>
                </el-form-item>
            </el-form>
          </div>
          <div>
            <el-table
              :data="tableData"
              v-loading="labelLoaing"
              @selection-change="addSelectionChange"
              ref="multipleTable"
              style="width: 100%"
              size="mini"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="labelName" label="标签名称" sortable align="center"></el-table-column>
              <el-table-column prop="markTimes" label="标记次数" align="center"></el-table-column>
              <el-table-column class-name="status-col" align="center" fixed="right" label="操作" >
                <template slot-scope="scope">
                  <kt-button
                    @click="selecteChange(scope.row)" type="text" size="mini" label="选择">
                  </kt-button>
                </template>
              </el-table-column>
            </el-table>
            <!--分页栏-->
            <div class="toolbar t_r" v-if="tableData.length > 0">
              <el-pagination
                @size-change="producthandleSizeChange"
                @current-change="producthandleCurrentChange"
                :current-page="labelForm.start"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="labelForm.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tabelDataTotal"
              ></el-pagination>
            </div>
          </div>
        <div slot="footer" class="dialog-footer" style="text-align:center">
          <el-button type="primary" :size="size" @click="cancel">取消</el-button>
          <el-button :size="size" type="primary" @click="addLabel">确定</el-button>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="deleteDialogVisible" title="删除标签" size="mini" width="50%" :close-on-click-modal="false">
          <div>
            <div style="width: 22%;background: #e5e3e3;line-height: 30px;text-align: center;">已选标签:<span>{{this.haveLabelNums}}</span></div>
            <el-table
              :data="deletetableData"
              v-loading="labelLoaing"
              @selection-change="addSelectionChange"
              ref="multipleTable"
              style="width: 100%"
              size="mini"
            >
              <el-table-column prop="labelName" label="标签名称" sortable align="center"></el-table-column>
              <el-table-column prop="markTimes" label="标记次数" align="center"></el-table-column>
              <el-table-column class-name="status-col" align="center" fixed="right" label="操作" width="250" >
              <template slot-scope="scope">
                <kt-button
                  @click="delLabelMember(scope.row)" type="text" size="mini" label="删除标签">
                </kt-button>
              </template>
            </el-table-column>
            </el-table>
            <!--分页栏-->
            <div class="toolbar t_r" v-if="deletetableData.length > 0">
              <el-pagination
                @size-change="producthandleSizeChange"
                @current-change="producthandleCurrentChange"
                :current-page="labelForm.start"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="labelForm.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="deletetableDataTotal"
              ></el-pagination>
            </div>
          </div>
        <div slot="footer" class="dialog-footer" style="text-align:center">
          <el-button type="primary" plain :size="size" @click.native="deleteDialogVisible = false">取消</el-button>
          <el-button :size="size" type="primary" @click="deleteLabel">确定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import CyTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
export default {
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    var validateUserAccount = (rule, value, callback) => {
      if (value != null) {
        let that = this;
          let patrn = value.replace(/[`～*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, "");
          if (patrn != value) {
            that.filters.userAccount=patrn;
            callback(new Error('禁止输入特殊字符'));
          }
      }
    };
    var validateNickName = (rule, value, callback) => {
      let that = this;
      let patrn = value.replace(/[`～*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, "");
      if (patrn != value) {
        that.filters.nickName=patrn;
        callback(new Error('禁止输入特殊字符'));
      }
    };
    var validatePhone = (rule, value, callback) => {
      let that = this;
      console.log("正则结果：" + value.replace(/[^0-9]/g, ''));      
      let patrn = value.replace(/[^0-9]/g, '');
      if (patrn != value) {
        that.filters.phone = patrn;
        callback(new Error('禁止输入特殊字符'));
      }
    };
    return {
      labelLoaing:false,
      startLoginDateDisabled: {},//开始时间限制
      endLoginDateDisabled: {},//结束时间限制
      startDateDisabled: {},//开始时间限制
      endDateDisabled: {},//结束时间限制
      loading: true,
      haveLabelNums:null,
      deleteIds:[],
      deletetableDataTotal: 0,
      deleteDialogVisible: false,
      deletetableData: [],
      labelOptions: [],
      totalSize: 0,
      labelForm: {
        start: 1,
        limit: 10,
        memberId: null
      },
      memberLabelForm: {
        start: 1,
        limit: 10,
        memberId: null,
        deleteFlag: 0
      },
      multipleSelection: [],
      childOptions: [],
      tableList: [],
      labelSelection: [],
      tabelDataTotal: 0,
      tableData: [],
      integralBegin: null,
      integralEnd: null,
      isBlacklist: null,
      businessId: null,
      deptMsg:localStorage.getItem('user'),//当前登录组织信息
      userId: localStorage.getItem("userId"), //当前登录用户id
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
      id: null,
      userNumber: null,
      userAccount: null,
      nickName: null,
      phone: null,
      integral: null,
      userSource: null,
      userSourceList: [
        {
          value: '1',
          label: '自营'
        }, {
          value: '2',
          label: '第三方商户'
        }
      ],
      registrationTime: null,
      lastLogTime: null,
      status: null,
      logStartTime: null,
      logEndTime: null,
      registrationStartTime: null,
      registrationEndTime: null,
      isAuthentication: null,
      size: "mini",
      editForm: {
        isBlacklist: null,
        id: null,
        integral: null,
        rmb: null,
        dailyCeiling: null,
        maxGrowthValue: null,
        startTime: null,
        endTime: null,
        status: null,
        deleteFlag: null
      },
      filters: {
        start: 1,
        limit: 10,
        labelName: [],
        isAuthentication: null,
        phone: null,
        nickName: null,
        userAccount: null,
        childId: null,
        status: null,
        integralEnd: null,
        integralBegin: null,
        userSource: null,
        logStartTime: null,
        logEndTime: null,
        registrationEndTime: null,
        registrationStartTime: null,
        ascriptionStatus:null
      },
      filtersRules: {
        userAccount: [
          { validator: validateUserAccount, trigger: 'change' }
        ],
        nickName: [
          { validator: validateNickName, trigger: 'change' }
        ],
        phone: [
          { validator: validatePhone, trigger: 'change' }
        ],
      },
      columns: [
        { prop: "id", label: "序号", minWidth: 130 },
        { prop: "userAccount", label: "用户账号", minWidth: 120 },
        { prop: "nickName", label: "昵称", minWidth: 120 },
        { prop: "phone", label: "手机号", minWidth: 120 },
        { prop: "integral", label: "会员积分", minWidth: 120 },
        {
          prop: "userSource",
          label: "用户来源",
          minWidth: 120
        },
        {
          prop: "isAuthentication",
          label: "是否实名认证",
          minWidth: 120,
          formatter: this.userisAuthenticationFormatter
        },
        { prop: "registrationTime", label: "注册时间", minWidth: 120 },
        { prop: "lastLogTime", label: "最后登录时间", minWidth: 120 },
        {
          prop: "status",
          label: "状态	",
          minWidth: 90,
          formatter: this.isBlacklistFormatter
        }
      ],
      labelOptions: [],
      filterColumns: [],
      userList:[],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      printPage: false,
      operation: false, // true:新增, false:编辑
      editDialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,

      // 新增编辑界面数据
      dataForm: {
        deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
        id: null,
        childOptions: [],
        headImage: null,
        isAuthentication: null,
        birth: null,
        wxAccount: null,
        wxName: null,
        wxImage: null,
        userNumber: null,
        userAccount: null,
        nickName: null,
        phone: null,
        isBlacklist: null,
        integral: null,
        userSource: null,
        registrationTime: null,
        lastLogTime: null,
        status: null,
        logStartTime: null,
        logEndTime: null,
        registrationStartTime: null,
        registrationEndTime: null
      },
      // 获取分页数据
      checked: []
    };
  },
  methods: {
    checkLogStartTime: function() {
      var this_ = this;
      this_.endLoginDateDisabled = {
        disabledDate: time => {
          if (this_.filters.logStartTime) {
            return time.getTime() <= new Date(this_.filters.logStartTime).getTime();
          }
        }
      };
    },
    checkLogEndTime: function() {
      var this_ = this;
      this_.startLoginDateDisabled = {
        disabledDate: time => {
          if (this_.filters.logEndTime) {
            return time.getTime() >= new Date(this_.filters.logEndTime).getTime();
          }
        }
      };
    },
    changeStartDate: function() {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: time => {
          if (this_.filters.registrationStartTime) {
            return time.getTime() <= new Date(this_.filters.registrationStartTime).getTime();
          }
        }
      };
    },
    changeEndDate: function() {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: time => {
          if (this_.filters.registrationEndTime) {
            return time.getTime() >= new Date(this_.filters.registrationEndTime).getTime();
          }
        }
      };
    },
     //点击搜索，页码重置
    findPageClick(){
      this.filters.start = 1;
      this.findPage();
    },
    selectModel(id) {
      let obj = {};
      obj = this.labelOptions.find(item => {
        //model就是上面的数据源
        if (item.id === id) {
          this.filters.labelName = item.labelName;
        }
      });
    },
    selectBlur(e) {
      this.filters.labelName = e.target.value;
    },
    //查询后台标签信息
    remoteMethod: function(query) {
      if (query !== "") {
        var this_ = this;
        var search = {};
        search.labelName = query;
        this.utils.request.queryLableList(search, function(res) {
          this_.labelOptions = res.data;
        });
      } else {
        this.labelOptions = [];
      }
    },
    //复选框选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    selecteChange(rows){
      if (rows) {

        this.$refs.multipleTable.toggleRowSelection(rows);

      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //批量设置标签
    batchSetLabelParams() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "批量设置标签时至少选择一条数据",
          type: "error"
        });
        return;
      }
      let this_ = this;
      this.editDialogVisible = true;

      //查询标签信息
      this.utils.request.findMemMemberCustomLabelPage(this.labelForm, function(res) {
        if (res.code == "0000") {
          this_.tableData = res.data.rows;
          this_.tabelDataTotal = res.data.total;
          // this_.labelForm.memberId = data.id;
        }
      });
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    // 获取分页数据
    findPage: function(data) {
      let this_ = this;

      this_.loading=true;
      this.utils.request.queryMemberUserList(this_.filters, function(res) {
        if (res.code == "0000") {
          this_.tableList = res.data.rows;
          this_.totalSize = res.data.total;
          this_.loading=false;
        }
      });
    },

    handleIsBlacklist: function(row) {  //加入黑名单
      let this_=this;
        this.$confirm( "您确定要将该用户加入冻结吗？" +  "加入冻结后该用户将禁止登陆","提示",
          {
            type: "warning",
            closeOnClickModal: false
          }
        )
          .then(() => {
            const params = {};
            params.id = row.id;
            params.status = 0;
            const this_ = this;
            this.utils.request.isBlacklist(params, function(res) {
              if (res.code === "0000") {
                this_.$message({ message: "操作成功", type: "success" });
              } else {
                this_.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
              this_.findPage();
            });
          })
          .catch(() => {});


    },

    handleIsWhitelist: function(row) {   //加入白名单
      let this_=this;
        this.$confirm(
          "您确定要将该用户加入解冻吗？" +
            "加入解冻后该用户将允许登陆",
          "提示",
          {
            type: "warning",
            closeOnClickModal: false
          }
        )
          .then(() => {
            let params = {};
            params.id = row.id;
            params.status = 1;
            let this_ = this;
            this.utils.request.isBlacklist(params, function(res) {
              if (res.code === "0000") {
                this_.$message({ message: "操作成功", type: "success" });
              } else {
                this_.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
              this_.findPage();
            });
          })
          .catch(() => {});

    },
    // 换页刷新
    producthandleCurrentChange(pageNum) {
      this.labelForm.start = pageNum;
      this.SetLabelParams();
    },
    producthandleSizeChange(pageSize) {
      this.labelForm.start = 1;
      this.labelForm.limit = pageSize;
      this.SetLabelParams();
    },
    // 换页刷新
    currentChange(pageNum) {
      this.filters.start = pageNum;
      this.findPage();
    },
    sizeChange(pageSize) {
      this.filters.start = 1;
      this.filters.limit = pageSize;
      this.findPage();
    },
    //设置标签
    SetLabelParams(data) {
      let this_ = this;
      this.editDialogVisible = true;
      //查询标签信息
      this.labelLoaing = true;
      this.utils.request.findMemMemberCustomLabelPage(this.labelForm, function(res) {
        if (res.code == "0000") {
          this_.tableData = res.data.rows;
          this_.tabelDataTotal = res.data.total;
          this_.labelForm.memberId = data.id;
          this_.labelLoaing = false;
          console.log('状态为：' + this_.labelLoaing)
        } else {
          console.log('222状态为：' + this_.labelLoaing)
        }
      });
    },
    // 选择标签
    addSelectionChange(val) {
      let this_ = this;
      this_.labelSelection = val;
    },
    //保存标签
    addLabel() {
      let params = {};
      let this_ = this;
      if (this.labelSelection.length == 0) {
        this.$message({ message: "保存时至少选择一条数据", type: "error" });
        return;
      }
      let labelIds = [];
      this.labelSelection.forEach(itme => {
        labelIds.push(itme.id);
      });
      let memberIds = [];
      params.labelIds = labelIds;
      if (this_.labelForm.memberId == null) {
        this_.multipleSelection.forEach(itmes => {
          memberIds.push(itmes.id);
        });
        params.memberIds = memberIds;
      } else {
        memberIds.push(this_.labelForm.memberId);
      }
      params.memberIds = memberIds;
      this.utils.request.saveMememberLabelInfo(params, function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
        } else {
          this_.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
        this_.labelForm.memberId=null;
        this_.findPage(null);
      });
      //需要先判断会员标签关联表是否入库；根据会员id与标签id判断查询判断，有数据则不加1
      if(this_.multipleSelection.length>0){
         this_.multipleSelection.forEach(items =>{
          this_.labelSelection.forEach(item =>{
            //保存标签前判断是否重复
             this_.memberLabelForm.memberId=items.id;
            this_.memberLabelForm.labelId=item.id;
            this_.utils.request.queryMememberLabelList(this_.memberLabelForm, function(//根据会员id和标签id查询是否有值
              res
            ) {
              //重复
              if (res.data.rows.length>0) {
              }else{//没有重复值，标记次数需要加1
                  let nums = Number(item.markTimes)+this_.multipleSelection.length;
                this_.utils.request.updateMememberCustomLabelInfo({id:item.id,timesOfMarking:nums}, function(res) {
                });
              }
            });
          });
        });
      }else{
        this_.updataTimesOfMake();
      }
      this_.editDialogVisible = false;
      this_.labelForm.labelName = null;
    },
    //取消标签
    cancel() {
      let that = this
      that.editDialogVisible = false
      that.labelForm.labelName = null
    },
    updataTimesOfMake(){
      let this_=this;
      this_.labelSelection.forEach(item =>{
        //保存标签前判断是否重复
        this_.memberLabelForm.memberId=this.labelForm.memberId;
        this_.memberLabelForm.labelId=item.id;
        this_.utils.request.queryMememberLabelList(this_.memberLabelForm, function(//根据会员id和标签id查询是否有值
          res
        ) {
          //重复
          if (res.data.rows.length>0) {
          }else{//没有重复值，标记次数需要加1
              let nums = Number(item.markTimes)+1;
            this_.utils.request.updateMememberCustomLabelInfo({id:item.id,timesOfMarking:nums}, function(res) {
            });
          }
        });
      });
    },
    //删除标签确认
    deleteLabel(){
      for(var i=0;i<this.deleteIds.length;i++){
        this.utils.request.deleteMememberLabelInfo({id:this.deleteIds[i].id}, function(res) {
        });
        //删除成功还需要根据标签id对标记次数减1
        let nums = parseInt(this.deleteIds[i].markingTimes)-1;
      this.utils.request.updateMememberCustomLabelInfo({id:this.deleteIds[i].labelid,timesOfMarking:nums}, function(res) {
      });
      }
      this.deleteDialogVisible=false;
      this.findPage();
    },

    //删除标签
    delLabelMember(data) {
      //已有标签数量显示
      this.haveLabelNums=this.haveLabelNums-1;
      //获取删除数据的id和下标
      this.deleteIds.push({'id':data.id,'labelid':data.labelId,'markingTimes':data.timesOfMaking});
      this.deletetableData.splice(this.deletetableData.indexOf(data),1);//根据下标删除
      this.deletetableDataTotal=this.haveLabelNums
    },
    //删除标签弹框
    DelLabelParams(data) {
      this.deleteDialogVisible = true;
      //查询当前用户当前平台下的标签
      this.memberLabelForm.memberId = data.id;
      this.memberLabelForm.labelId = null;
      this.queryMemberLable();
    },
    queryMemberLable() {
      let this_ = this;
      this_.deleteIds=[];
      //查询标签信息
      this_.labelLoaing = true;
      this.utils.request.queryMememberLabelList(this.memberLabelForm, function(res) {
        if (res.code == "0000") {
          this_.deletetableData = res.data.rows;
          this_.deletetableDataTotal = res.data.total;
          this_.haveLabelNums=this_.deletetableData.length;
          this_.labelLoaing = false;
        }
      });
    },
     //获取子平台列表
      queryDeptOption(){
       let query={}
       let this_=this
       query.deptType=1;
       this_.utils.request.getSecondDeptTree(query,function(res){
         if(res.code == '0000'){
           this_.childOptions=res.data[0].children;
         }
       })
      },
    userisAuthenticationFormatter: function(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "是";
      } else if (cellValue == 2) {
        return "未认证";
      }
    },
    //用户来源解析
    userSourceFormatter: function(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "自营";
      } else if (cellValue == 2) {
        return "第三方商户";
      }
    },
    //状态转化
    statusFormatter: function(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "启用";
      } else if (cellValue == 0) {
        return "停用";
      }
    },

    isBlacklistFormatter: function(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "正常";
      } else if (cellValue == 0) {
        return "冻结";
      }
    },
    //获取选择框数据
    selectionChange(val) {
      this.checked = val.selections;
    },
    handleClose() {
      (this.dataForm = {
        id: null,
        userNumber: null,
        userAccount: null,
        nickName: null,
        phone: null,
        integral: null,
        userSource: null,
        registrationTime: null,
        lastLogTime: null,
        status: null
      }),
        this.$refs.dataForm.resetFields();
    },
    // 详情页面
    handleDetail: function(data) {
      this.$router.push({
        path: "/UserInfo/" + data.id  + "/" + 1
      });
    },
    // 编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {
            closeOnClickModal: false
          }).then(() => {
            let params = Object.assign({}, this.dataForm);
            params.status = 2;
            var this_ = this;
            this.utils.request.editMerchantInfo(params, function(res) {
              if (res.code == "0000") {
                this_.$message({ message: "操作成功", type: "success" });

                this_.$refs["dataForm"].resetFields();

                this_.editDialogVisible = false;

                this_.findPage(null);
              } else {
                this_.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
            });
          });
        }
      });
    },

    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    resetForm(formName) {
      //需要校验的key
      let keys = ["registrationStartTime","registrationEndTime","logStartTime","logEndTime","childId","userSource"
      ,"integralBegin","integralEnd","status","childId","userAccount","nickName"
      ,"phone","isAuthentication","labelName","lastLogChild","ascriptionStatus"]
      let boo = this.seachTableUtils.checkFromIsNull(this.filters,keys)
      if(!boo){
        return
      }
      if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
           this.filters = {
            start: 1,
            limit: 10,
            labelName: null,
            isAuthentication: null,
            phone: null,
            nickName: null,
            userAccount: null,
            childId: null,
            status: null,
            integralEnd: null,
            integralBegin: null,
            userSource: null,
            logStartTime: null,
            logEndTime: null,
            registrationEndTime: null,
            registrationStartTime: null,
            lastLogChild:null,
          },
          this.findPage();
        }
    },

    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      var temp = [];

      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    }
  },
  mounted() {
    this.findPage();
    this.initColumns();
    this.remoteMethod();
  }
};
</script>

<style  lang="scss" scoped>
.font {
  font-size: 18px;
  font-weight: 800;
  margin-left: -98px;
}
/deep/ .color {
  background: #f56c6c;
  color: #fff;
}

.timePicker_Long {
  /deep/ .el-input__inner {
    width: 225px !important;
  }
}
/deep/ .el-table_1_column_11 .is-center {
  /deep/ .cell {
    /deep/ .el-button + .el-button {
      margin-left: 0 !important;
      margin-right: 10px !important;
      margin-bottom: 5px !important;
    }
  }
}

.search-input {
  .times {
    .times-to {
      padding: 0 10px;
      height: 32px;
      line-height: 32px;
      color: #999;
      display: inline-block;
    }
    /deep/ .el-date-editor {
      width: 211px !important;
    }
    /deep/ .el-input__inner {
      width: 208px !important;
    }
  }
}
.search-input {
  .times {
    /deep/ .w78 {
      width: 78px !important;
      .el-input__inner {
        width: 78px !important;
      }
    }
  }
}
/deep/ .w152 {
  width: 152px !important;
  .el-input .el-input__inner {
    width: 152px !important;
  }
}
/deep/ .w170 {
  width: 170px !important;
   .el-input__inner {
    width: 170px !important;
  }
}
.specialTable{
  /deep/ td{
    &:nth-last-child(1){
      text-align: left !important;
      .cell{
        .el-button{
          margin-left: 0 !important;
        }
      }
    }
  }
}
.lessPaddingRight{
  /deep/  .el-input__inner{
    padding-right: 10px !important;
  }
}
.ml15{
  margin-left: 15px !important;
}
.mr15{
  margin-right: 15px !important;
}
.mb10{
  margin-bottom: 10px !important;
}
.mt10{
  margin-top: 10px !important;
}
/deep/ .el-table__row {
  td {
    .cell {
      overflow: hidden;
      text-overflow: ellipsis;
      // display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      max-height: 86px !important;
    }
  }
}
</style>
